<%--
  Created by IntelliJ IDEA.
  User: sunny
  Date: 2019/1/17
  Time: 10:06
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>音乐购买</title>
    <jsp:include page="/resources/layout/_css.jsp"/>
    <script>
        var setting = {
            // 在以下双引号中粘贴QQ钱包收款链接
            qqUrl: "https://i.qianbao.qq.com/wallet/sqrcode.htm?m=tenpay&f=wallet&a=1&ac=6B9EB948B01836470434D42AAD31B01FC15C4154F57BB261EB475809165A1D8E&u=728102521&n=%E5%8E%BB%E7%A9%BF%E8%B6%8A%E3%81%98%E2%98%86ve%E6%9C%AA%E6%9D%A5de%E6%98%9F%E7%A9%BA",

            // 在以下双引号中粘贴微信收款链接
            wechatUrl: "wxp://f2f0_9uVauYL3rSbnfS7FN0pEspjSr9qUblj",

            // 在以下双引号中粘贴支付宝收款链接
            aliUrl: "https://qr.alipay.com/fkx049348blhxlfrcggwe08",

            // 用于动态生成二维码的API，不需要修改。
            qrcodeApi: "http://qr.liantu.com/api.php?text="
            /*
            备用二维码api：
            http://s.jiathis.com/qrcode.php?url=
            http://www.kuaizhan.com/common/encode-png?large=true&data=
            http://b.bshare.cn/barCode?site=weixin&url=
            http://pan.baidu.com/share/qrcode?w=150&h=150&url=
            */
        }
    </script>

    <style>
        * {
            margin: 0; padding: 0;
            font-family: Microsoft yahei;
        }
        body {
            background-color: #fff;
        }
        .code-item {
            width: 100%;
            max-width: 400px;
            margin: 0 auto;
            padding-bottom: 1px;
            display: none;
            background-color: #5c92ef;
        }
        .code-title {
            height: 100px;
            background-color: #f2f2f2;
            background-position: center;
            background-repeat: no-repeat;
            background-size: 50%;
        }
        .code-area {
            text-align: center;
        }
        .code-area>img {
            margin: 80px 0;
            width: 60%;
            min-width: 100px;
        }
        .code-footer {
            height: 80px;
            text-align: center;
            background-color: #fff;
            color: #666;
            line-height: 80px;
            font-size: 20px;
            margin: -2px 2px 2px 2px;
        }

        #code-all>.code-title {
            background-image: url("");
        }

        #code-qq {
            background-color: #54b4ef;
        }
        #code-qq>.code-title {
            background-image: url("");
        }

        #code-wechat {
            background-color: #54bc6e;
        }
        #code-wechat>.code-title {
            background-image: url("");

        }
    </style>

</head>
<body>
<!-- 万能收款码展示区域 -->
<div class="code-item" id="code-all">
    <div class="code-title"></div>
    <div class="code-area">
        <img id="page-url" src="">
    </div>
    <div class="code-footer">${purchaseInfo} </div>
</div>

<!-- QQ钱包二维码展示区域 -->
<div class="code-item" id="code-qq">
    <div class="code-title"></div>
    <div class="code-area">
        <img id="qq-url" src="">
    </div>
    <div class="code-footer">长按以上二维码购买歌曲</div>
</div>

<!-- 微信二维码展示区域 -->
<div class="code-item" id="code-wechat">
    <div class="code-title"></div>
    <div class="code-area">
        <img id="wechat-url" src="">
    </div>
    <div class="code-footer">长按以上二维码购买歌曲</div>
</div>

<script>
    if(navigator.userAgent.match(/Alipay/i)) {
        // 支付宝
        window.location.href = setting.aliUrl;
    } else if(navigator.userAgent.match(/MicroMessenger\//i)) {
        // 微信
        document.getElementById("wechat-url").src = setting.qrcodeApi + urlEncode(setting.wechatUrl);
        document.getElementById("code-wechat").style.display = "block";
    } else if(navigator.userAgent.match(/QQ\//i)) {
        // QQ
        document.getElementById("qq-url").src = setting.qrcodeApi + urlEncode(setting.qqUrl);
        document.getElementById("code-qq").style.display = "block";
    } else {
        // 其它，显示“万能码”
        document.getElementById("page-url").src = setting.qrcodeApi + urlEncode(window.location.href);
        document.getElementById("code-all").style.display = "block";
    }

    /*****************************************
     * url编码函数
     * 输入参数：待编码的字符串
     * 输出参数：编码好的
     ****************************************/
    function urlEncode(String) {
        return encodeURIComponent(String).replace(/'/g,"%27").replace(/"/g,"%22");
    }
</script>
<form action="/SongUtilServlet?state=purchase" method="post">
    <input type="hidden" name="user_id" value="${user_id}"/>
    <input type="hidden" name="song_id" value="${song_id}"/>
    <div class="hr-line-dashed"></div>
    <div align="center">
        <div class="btn btn-primary" >
            <input type="submit" value="我已支付" style="background: #1AB394;border: 0px;color: #FFF7FB;"/>
        </div>
    </div>
</form>
<%--<script>--%>
    <%--function purchase() {--%>
        <%--$(document).ready(function () {--%>
            <%--$.ajax({--%>
                <%--type:"post",//提交方式--%>
                <%--dataType: "json",//预期服务器返回的数据类型--%>
                <%--data:$('#form1').serialize(),//传输的数据--%>
                <%--url:"${ctx}/SongUtilServlet?state=purchase",//传输路径--%>
                <%--success:function (msg) {--%>
                    <%--if (msg.code==200){--%>
                        <%--layer.msg(msg.message);--%>
                        <%--window.location.href="${ctx}/SongUtilServlet?state=querySongs";--%>
                    <%--} else {--%>
                        <%--alert(msg.message);--%>
                    <%--}--%>
                <%--},--%>
                <%--error:function () {--%>
                    <%--alert("异常！");--%>
                <%--}--%>
            <%--});--%>
        <%--});--%>
    <%--}--%>

<%--</script>--%>
</body>
</html>
